{% extends "base.html" %}

{% block title %}{{ music.song_name }} - 音乐详情{% endblock %}

{% block head %}
<style>
    .rating-container {
        margin: 20px 0;
    }
    
    .star-rating {
        font-size: 24px;
        color: #ffc107;
    }
    
    .star-rating .star {
        cursor: pointer;
        padding: 0 2px;
    }
    
    .star-rating .star.selected {
        color: #ff9800;
    }
    
    .music-info {
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    
    .music-actions {
        display: flex;
        margin: 20px 0;
    }
    
    .music-actions a, .music-actions button {
        margin-right: 10px;
    }
    
    .comment-container {
        margin-top: 30px;
    }
    
    .comment-item {
        padding: 15px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    
    .comment-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    
    .comment-user {
        font-weight: bold;
    }
    
    .comment-date {
        color: #6c757d;
        font-size: 0.9em;
    }
    
    .comment-content {
        margin-bottom: 10px;
    }
    
    .comment-actions {
        text-align: right;
    }
    
    .reply-container {
        margin-left: 40px;
        margin-top: 10px;
    }
    
    .reply-form {
        display: none;
        margin-top: 10px;
    }
    
    .average-rating {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .user-rating {
        font-weight: bold;
        margin-bottom: 15px;
    }
    
    .player-container {
        margin: 20px 0;
    }
    
    .inline-player {
        width: 100%;
    }
</style>
{% endblock %}

{% block body %}
<div class="music-info">
    <h2>{{ music.song_name }}</h2>
    <div class="row">
        <div class="col-md-6">
            <p><strong>歌手：</strong> {{ music.artist_name }}</p>
            <p><strong>作曲：</strong> {{ music.composer }}</p>
            <p><strong>作词：</strong> {{ music.lyricist }}</p>
            <p><strong>流派：</strong> {{ music.genre_ids }}</p>
            <p><strong>语种：</strong> {{ music.language }}</p>
            <p><strong>时长：</strong> {{ music.song_length }} ms</p>
        </div>
        <div class="col-md-6">
            <div class="average-rating">
                <span>平均评分：</span>
                {% if music.average_rating > 0 %}
                    <span class="star-rating">
                        {% for i in "12345" %}
                            {% if forloop.counter <= music.average_rating|floatformat:"0" %}
                                <span class="star selected">★</span>
                            {% else %}
                                <span class="star">☆</span>
                            {% endif %}
                        {% endfor %}
                    </span>
                    <span>{{ music.average_rating|floatformat:1 }}</span>
                    <small>({{ music.rating_count }}人评分)</small>
                {% else %}
                    <span>暂无评分</span>
                {% endif %}
            </div>
            
            {% if user_rating %}
                <div class="user-rating">
                    <span>您的评分：</span>
                    <span class="star-rating">
                        {% for i in "12345" %}
                            {% if forloop.counter <= user_rating.score %}
                                <span class="star selected">★</span>
                            {% else %}
                                <span class="star">☆</span>
                            {% endif %}
                        {% endfor %}
                    </span>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 播放器 -->
<div class="player-container">
    <h4>试听音乐</h4>
    <audio id="audio-player" class="inline-player" controls>
        <source src="{{ music.url }}" type="audio/mpeg">
        您的浏览器不支持音频播放功能。
    </audio>
    <div class="mt-2">
        <a href="/play/{{ music.pk }}" target="_blank" class="btn btn-info">视觉播放</a>
    </div>
</div>

<!-- 音乐操作 -->
<div class="music-actions">
    {% if music in user_likes %}
        <span class="btn btn-danger">已添加到我喜欢</span>
    {% else %}
        <a href="/like/{{ music.pk }}?from=/music/{{ music.pk }}" class="btn btn-outline-danger">添加到喜欢</a>
    {% endif %}
    
    {% if music in user_dislikes %}
        <span class="btn btn-warning">已添加到不喜欢</span>
    {% else %}
        <a href="/dislike/{{ music.pk }}?from=/music/{{ music.pk }}" class="btn btn-outline-warning">添加到不喜欢</a>
    {% endif %}
</div>

<!-- 评分表单 -->
<div class="rating-container">
    <h4>为这首歌打分</h4>
    <form method="post" action="/music/{{ music.pk }}/rate/">
        {% csrf_token %}
        <div class="form-group">
            <div class="star-rating" id="rating-stars">
                <span class="star" data-rating="1">☆</span>
                <span class="star" data-rating="2">☆</span>
                <span class="star" data-rating="3">☆</span>
                <span class="star" data-rating="4">☆</span>
                <span class="star" data-rating="5">☆</span>
                <input type="hidden" name="score" id="rating-value" value="{% if user_rating %}{{ user_rating.score }}{% else %}0{% endif %}">
            </div>
        </div>
        <button type="submit" class="btn btn-primary">提交评分</button>
    </form>
</div>

<!-- 评论表单 -->
<div class="comment-container">
    <h4>发表评论</h4>
    <form method="post" action="/music/{{ music.pk }}/comment/">
        {% csrf_token %}
        <div class="form-group">
            {{ comment_form.content }}
        </div>
        <button type="submit" class="btn btn-primary">发表评论</button>
    </form>
</div>

<!-- 评论列表 -->
<div class="comment-list mt-4">
    <h4>评论列表 ({{ comments.count }}条)</h4>
    
    {% if comments %}
        {% for comment in comments %}
            {% if not comment.parent %}  <!-- 只显示主评论，不显示回复 -->
                <div class="comment-item" id="comment-{{ comment.id }}">
                    <div class="comment-header">
                        <span class="comment-user">{{ comment.user.username }}</span>
                        <span class="comment-date">{{ comment.created_at|date:"Y-m-d H:i" }}</span>
                    </div>
                    <div class="comment-content">
                        {{ comment.content }}
                    </div>
                    <div class="comment-actions">
                        <button class="btn btn-sm btn-outline-secondary reply-btn" 
                                onclick="toggleReplyForm({{ comment.id }})">回复</button>
                    </div>
                    
                    <!-- 回复表单 -->
                    <div class="reply-form" id="reply-form-{{ comment.id }}">
                        <form method="post" action="/comment/{{ comment.id }}/reply/">
                            {% csrf_token %}
                            <div class="form-group">
                                <textarea name="content" class="form-control" rows="2" placeholder="回复此评论..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-sm btn-primary">提交回复</button>
                            <button type="button" class="btn btn-sm btn-secondary" 
                                    onclick="toggleReplyForm({{ comment.id }})">取消</button>
                        </form>
                    </div>
                    
                    <!-- 回复列表 -->
                    {% if comment.replies.all %}
                        <div class="reply-container">
                            {% for reply in comment.replies.all %}
                                <div class="comment-item">
                                    <div class="comment-header">
                                        <span class="comment-user">{{ reply.user.username }}</span>
                                        <span class="comment-date">{{ reply.created_at|date:"Y-m-d H:i" }}</span>
                                    </div>
                                    <div class="comment-content">
                                        {{ reply.content }}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        {% endfor %}
    {% else %}
        <p>暂无评论，快来发表第一条评论吧！</p>
    {% endif %}
</div>

<script>
    // 星级评分处理
    document.addEventListener('DOMContentLoaded', function() {
        const stars = document.querySelectorAll('#rating-stars .star');
        const ratingInput = document.getElementById('rating-value');
        
        // 初始化评分显示
        updateStars(parseInt(ratingInput.value) || 0);
        
        // 点击星星事件
        stars.forEach(star => {
            star.addEventListener('click', function() {
                const rating = parseInt(this.getAttribute('data-rating'));
                ratingInput.value = rating;
                updateStars(rating);
            });
            
            // 鼠标悬停效果
            star.addEventListener('mouseover', function() {
                const rating = parseInt(this.getAttribute('data-rating'));
                highlightStars(rating);
            });
            
            star.addEventListener('mouseout', function() {
                updateStars(parseInt(ratingInput.value) || 0);
            });
        });
        
        function updateStars(rating) {
            stars.forEach((star, index) => {
                if (index < rating) {
                    star.textContent = '★';
                    star.classList.add('selected');
                } else {
                    star.textContent = '☆';
                    star.classList.remove('selected');
                }
            });
        }
        
        function highlightStars(rating) {
            stars.forEach((star, index) => {
                if (index < rating) {
                    star.textContent = '★';
                    star.classList.add('selected');
                } else {
                    star.textContent = '☆';
                    star.classList.remove('selected');
                }
            });
        }
    });
    
    // 回复表单处理
    function toggleReplyForm(commentId) {
        const replyForm = document.getElementById(`reply-form-${commentId}`);
        if (replyForm.style.display === 'block') {
            replyForm.style.display = 'none';
        } else {
            // 隐藏所有其他回复表单
            document.querySelectorAll('.reply-form').forEach(form => {
                form.style.display = 'none';
            });
            replyForm.style.display = 'block';
        }
    }
    
    // 音频播放失败处理
    document.getElementById('audio-player').addEventListener('error', function() {
        alert('音乐无法播放，可能音乐链接已失效');
    });
</script>
{% endblock %} 